<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>js的类型</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <script>
        // 1.对变量提升的理解  (变量定义和函数声明、)
        // 2.说明this几种不同的使用场景（作为构造函数执行、作为对象执行，作为普通函数执行，call apply bind）
        // 3.创建10个<a>标签，点击的时候弹出对应的序号
        // 4.如何理解作用域(自由变量，作用链域即自由变量的查找、闭包的两个场景【函数作为返回值的参数】)
        // 5.实际开发中闭包的应用

        //执行上下文
        console.log(a)
        var a = 100
        fn('jing') //jing 20
        function fn(name){
            age = 20;
            console.log(name,age);
            //var age;
        }
        //this
        //作为构造函数执行
        //作为对象执行
        //作为普通函数执行
        //call apply bind
        function fn1(name,age){
            alert(name)
            console.log(this)//this代表的是第一个参数
        }
        fn1.call({x:1000},'jing',22)
        //bind
        var fn2 = function(name,age){
            alert(name)
            console.log(this)
        }.bind({y:200})
        fn2('jing',20)

        //this要在执行的时候才能确认值，定义时无法确认
            var a = {
                name:'A',
                fn:function(){
                    console.log(this.name)
                }
            }
            a.fn() //this===A
            a.fn.call({name:'B'})//this===B
            var fn1 = a.fn
            fn1()//this===window
        //作用域的闭包和this的演示
        
        //作用域
            //无块级作用域
            if(true){
                var name = 'jing'
            }
            console.log(name)  //jing
            //函数和全局作用域
            var a = 100
            function fn(){
                //加上
                var a =200
                console.log('fn',a)
            }
            console.log('global',a)
            fn() //fn=100  global=100  ,加上var = 200之后结果：global 100  fn 200
        //作用链域
        var a = 100
        function fn(){
            var b = 2000
            //自由变量：当前作用域没有定义的变量
            console.log(a) //100
            console.log(b) //2000
        }
        fn()
//
        var a = 100
        function fn1(){
            var b = 2000
            function fn2(){
                var c = 200
                console.log(a) //100
                console.log(b) //2000
                console.log(c) //200
            }
            fn2()
        }
        fn1()

        //闭包
        //函数为返回值
        function F1(){
            var a = 100
            return function(){
                console.log(a);
            }
        }
        var f1 = F1()

        //函数作为参数来传递
        function F2(fn){
            var a =200
            fn()
        }
        F2(f1)

    //创建10个<a>标签
    //一下是错误写法
        var i,a 
        for(i=0;i<10;i++){
            a = document.createElement('a')
            a.innerHTML = i + '<br>'
            a.addEventListener('click',function(e){
                e.preventDefault()
                alert(i)
            })
            document.body.appendChild(a)
        }
    //正确写法
    var i
    for(i=0;i<10;i++){
        (function(i){
            a = document.createElement('a')
            a.innerHTML = i + '<br>'
            a.addEventListener('click',function(e){
                e.preventDefault()
                alert(i)
            })
            document.body.appendChild(a)
        })(i)
    }
    </script>
</body>
</html>